<template>
<el-row>
    <el-col :span="8">
        <el-card class="box-card-user">
            <div id="user">
                <img :src="userPic" alt="">
                <div id="userInfo">
                    <span class="Striking">Admin</span>
                    <span class="Secondary">超级管理员</span>
                </div>
            </div>
            <div id="lognInfo">
                <p>上次登陆时间：<span>公元前384年-4月-11日</span></p>
                <p>上次登陆地点：<span>赵国-邯郸</span></p>
            </div>
        </el-card>
        <el-card class="box-card-table">
            <el-table
            :data="tableData"
            style="width: 100%">
                <el-table-column
                    prop="name"
                    label="姓名">
                </el-table-column>
                <el-table-column
                    prop="kills"
                    label="今日杀敌数">
                </el-table-column>
                <el-table-column
                    prop="altogether"
                    label="总杀敌数">
                </el-table-column>
                <el-table-column
                    prop="grade"
                    label="等级">
                </el-table-column>
            </el-table>
        </el-card>
    </el-col>
    <el-col :span="16">
        <div id="for-card-box">
            <el-card v-for="(item, index) in countData" :key="index" class="box-card-count" body-style="padding: 0;display: flex;">
                <div class="iconBox" :style="`background-color: ${item.color};`">
                    <component class="icons" :is="item.icon"></component>
                </div>
                <div class="info">
                    <p class="Striking">{{ item.value }}</p>
                    <p class="Secondary">{{ item.label }}</p>
                </div>
            </el-card>
        </div>
        <el-card class="box-card-LineChart" body-style="padding: 0;">
            <echarta-vue style="height: 280px;" :chartData="echartData.onder"/> 
        </el-card>
        <div id="chart-card-box">
            <el-card class="box-card-chart" body-style="padding: 0;">
                <echarta-vue style="height: 240px;" :chartData="echartData.user"/>
            </el-card>
            <el-card class="box-card-chart" body-style="padding: 0;">
                <echarta-vue style="height: 240px;" :chartData="echartData.video" :isAxisChar="false"/>
            </el-card>
        </div>
    </el-col>
</el-row>
</template>

<script>
import { homeData } from '../../api/HomeApi'
import EchartaVue from '../../components/Echarts/index.vue'
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
export default defineComponent({
    name: 'Home',
    setup() {
        const data = reactive({
            userPic: new URL('../../assets/images/userPic.jpg', import.meta.url).href, // 用户头像
            tableData:[], // 表格数据
            countData:[], // 卡片数据
            echartsData:{}, // 图表数据
            echartData:{ // 图标配置数据
                onder:{
                    xData:[],
                    series:[],
                },
                user:{
                    xData:[],
                    series:[],
                },
                video:{
                    series:[],
                },
            },
        })
        onBeforeMount(() => {
            // 组件挂载页面之前执行
            homeData().then(res =>{
                data.countData = res.countData
                data.tableData = res.tableData
                data.echartsData = res.echartsData

                const onder = data.echartsData
                // 折线图数据及配置
                const keyArray = Object.keys(onder.data[0])
                const series = []
                keyArray.forEach(key =>{
                    series.push({
                        name: key,
                        data: onder.data.map(item => item[key]),
                        type: 'line',
                    })
                })
                data.echartData.onder.xData = onder.date
                data.echartData.onder.series = series

                // 柱状图数据及配置
                data.echartData.user.xData = onder.userData.map(item => item.date),
                data.echartData.user.series = [
                    {
                        name: '新增士兵',
                        data: onder.userData.map(item => item.new),
                        type: 'bar',
                    },
                    {
                        name: '杀敌士兵',
                        data: onder.userData.map(item => item.active),
                        type: 'bar',
                    },
                ]

                // 饼图数据及配置
                const videoOption = {
                    tooltip:{
                        trigger:"item",
                    },
                    color:[
                        "#0f78f4",
                        "#dd536b",
                        "#9462e5",
                        "#a6a6a6",
                        "#e1bb22",
                        "#39c362",
                        "#3ed1cf",
                    ],
                    series:{
                        data: data.tableData.map(item =>{
                            const obj = {
                                name: item.name,
                                value: item.altogether
                            }

                            return obj
                        }),
                        type:'pie'
                    },
                }
                data.echartData.video.series = {
                    data: data.tableData.map(item =>{
                        const obj = {
                            name: item.name,
                            value: item.altogether
                        }

                        return obj
                    }),
                    type:'pie'
                }
            })
        })
        onMounted(() => {
            // 组件挂载到页面之后执行
        })
        return {
            ...toRefs(data),
        }
    },
    components:{ EchartaVue },
})
</script>

<style scoped>
.box-card-user{
    width: calc(100% - 20px);
    height: 260px;
    margin: 0 auto;
}
.box-card-user #user{
    display: flex;
}
.box-card-user #user>img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
}
.box-card-user #user>#userInfo{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 20px;
}
.box-card-user #user>#userInfo>span{
    margin: 5px 0;
}
.box-card-user #lognInfo{
    width: 100%;
    height: 80px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 1px solid #9499a0;
}
.box-card-user #lognInfo p{
    color: #9499a0;
    margin: 4px 0;
    position: relative;
    top: 10px;
    font-size: 14px;
}
.box-card-user #lognInfo p>span{
    color: #cfd2d9;
}

.box-card-table{
    margin: 20px auto 0 auto;
    width: calc(100% - 20px);
    height: 460px;
}

#for-card-box{
    margin: 0 auto;
    width: calc(100% - 0px);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.icons{
    color: #1e1e1e;
    width: 24px;
    height: 24px;
}
.box-card-count{
    width: calc(33.33333% - 22px);
    height: 80px;
    margin: 0 10px 20px 10px;
}
.box-card-count .iconBox{
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}
.box-card-count .info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;
}

.box-card-LineChart{
    width: calc(100% - 20px);
    height: 280px;
    margin: 0 auto 0 auto;
}

#chart-card-box{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}
.box-card-chart{
    width: calc(50% - 20px);
    height: 240px;
    margin: 0 auto;
}

.Striking{
    font-size: 24px;
    color: #cfd2d9;
}
.Secondary{
    font-size: 14px;
    color: #b1b7bf;
}
</style>